<template>
	<view class="container">
		<picker mode="date" :value="date" fields="month"  @change="bindDateChange">
			<view @click="show = true" class="" style="display: flex;align-items: center;padding: 20rpx 36rpx;background-color: #fff;border-top: 2rpx solid #ddd;">
				{{year}}年{{month}}月
				<img src="@/static/back.png" alt="" srcset="" style="transform: rotate(-90deg);margin-left: 10rpx;width: 20rpx;height: 40rpx;">
			</view>
		</picker>
		<view v-if="list.length <= 0" style="text-align: center;margin-top: 20rpx;">
			暂无数据
		</view>
		<view class="list" v-else>
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="title">
					<view class="time">
						{{item.createtime}}
					</view>
					<view class="result " :class="item.status_name == '审核通过' ? 'result_success' :'result_fail'">
						{{item.status_name}}
					</view>
				</view>
				<view class="cell">
					<view class="label">
						提现-到{{item.bank_name}}
					</view>
					<view class="value number">
						-{{item.money}}
					</view>
				</view>
				<!-- <view class="cell">
					<view class="label">
						原因：{{item.reason}}
					</view>
					<view class="value " :class="item.payResult == '支付成功' ? 'pay_success' :'pay_fail'">
						{{item.payResult}}
					</view>
				</view> -->
			</view>
		</view>
		
	</view>
</template>

<script>
	import {withdrawLog} from '@/api/api.js'
	export default {
		data() {
			return {
				date: '',
				year:'',
				month:'',
				list:[],
				endDate: new Date().toISOString().slice(0, 7)
			}
		},
		onShow() {
			let date = new Date()
			this.year = date.getFullYear()
			let month = date.getMonth() + 1
			this.month = month > 9 ? ('' + month) : ('0' + month)
			this.date = this.year + '-' + this.month
			this.getShopList()
		},
		
		methods: {
			getShopList(){
				withdrawLog({year:this.year,month:this.month}).then(res=>{
					console.log(res)
					this.list = res.data.data.data
				})
			},
			bindDateChange: function(e) {
				this.year = e.detail.value.split('-')[0]
				this.month = e.detail.value.split('-')[1]
				this.date = e.detail.value
				this.getShopList()
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
	}
	.list {
		padding: 0 24rpx;
		.list-item {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 24rpx 32rpx;
			box-shadow: 0px 4rpx 20rpx 0px rgba(102,102,102,0.05);
			border-radius: 12rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #222222;
			line-height: 42rpx;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #F0F0F0;
				padding-bottom: 18rpx;
				.time {
					font-size: 28rpx;
					line-height: 40px;
					color: #D1D2D5;
				}
			}
			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 22rpx;
				.number {
					font-size: 36rpx;
					line-height: 50rpx;
					font-weight: 500;
					color: #FA2C1E;
				}
			}
			.result_success {
				color: #00B34D;
			}
			.result_fail {
				color: #FA2C1E;
			}
			.pay_success {
				color: #2EB059;
			}
			.pay_fail {
				color: #FA2C1E;
			}
		}
	}
</style>
